import React from 'react';
import {inject, observer} from "mobx-react";
import { withRouter } from 'react-router-dom';
import { ListView, Checkbox, SearchBar,Icon,Avatar,Tools } from 'weaver-mobile';
import * as ReactDOM from 'react-dom';
import '../../style/shareTool.less'

const CheckboxItem = Checkbox.CheckboxItem;
const getLabel = Tools.getLabel;
@withRouter
@observer
export  default class CustomHrmResource extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.state = {
            dataSource,
            isLoading: true,
            pageIndex:0,
            pageSize:20,
            shareValue:[],
            hasMore:true,
            searchList:[],
            shareUserList:[]
        };
    }

    componentDidMount() {
        const {shareValue,shareUserList} = this.props;
        let ss= shareUserList;

        let datas = [];

        for (let i in ss) {
            if(ss[i].checked=='1'){
                datas.push(ss[i])
            }else {
                if(shareValue.indexOf(ss[i].id)>-1){
                    ss[i].checked ='1';
                    datas.push(ss[i])
                }
            }
        }

        for (let i in ss) {
            if(ss[i].checked=='0'){
                datas.push(ss[i])
            }
        }




        this.setState({
                 shareValue:shareValue,
                 dataSource: this.state.dataSource.cloneWithRows(datas),
                 isLoading: false,
                 shareUserList:shareUserList
             });
    }



     genData = (pIndex = 0) => {
         const {attentionUserList,discussid} = this.props;
         const {dataSource} = this.state;
         attentionUserList({discussid:discussid,pageIndex:pIndex},(res) =>{

             let ss= res.list;
             if(dataSource&&dataSource._dataBlob&&dataSource._dataBlob.s1){
                 for (let i in ss) {
                     if(ss[i].checked=='0'){
                         dataSource._dataBlob.s1.push(ss[i]);
                     }
                 }
             }

             this.setState({
                 dataSource: this.state.dataSource.cloneWithRows( dataSource._dataBlob.s1),
                 isLoading: false,
                 hasMore:res.hasMore
             });
         })
    }


    onEndReached = (event) => {

        if(!this.state.hasMore){
            return;
        }
        if (this.state.isLoading &&!this.state.hasMore) {
            return;
        }
        this.setState({ isLoading: true });
     this.genData(this.state.pageIndex+2);
     this.setState({pageIndex:this.state.pageIndex+1})
    }


    checkBoxOnChange = (val) => {

        const {shareValue,shareUserList,dataSource} = this.state;
        let item = shareValue;

        let index = shareValue.indexOf(parseInt(val.id));

        if(index==-1){ //不存在
            item.push(parseInt(val.id));
        }else{
            item.splice(index,1);
        }

        if(dataSource&&dataSource._dataBlob&&dataSource._dataBlob.s1){
          let px = dataSource._dataBlob.s1.indexOf(val);
                if(  dataSource._dataBlob.s1[px].checked=='1'){
                    dataSource._dataBlob.s1[px].checked = '0'
                }else{
                    dataSource._dataBlob.s1[px].checked = '1'
                }
        }


        this.setState({  dataSource: this.state.dataSource.cloneWithRows(dataSource._dataBlob.s1),shareValue:item})


    }


    onOk = () => {
        this.props.history.go(-1);
        this.props.onCheckHrm(this.state.shareValue,this.state.dataSource._dataBlob.s1);
    }

    onCancel = () => {
        this.props.history.go(-1);
        const {dataSource} = this.state;
        let ss= dataSource._dataBlob.s1;
        for (let i in ss) {
            ss[i].checked='0'

        }

        this.props.onCheckHrm([],ss);
    }


    onSearchChange = (val) => {
        const {attentionUserList} = this.props;
        const {dataSource,shareValue} = this.state;
        attentionUserList({name:val,discussid:0},(res) =>{
            let ss= res.list;
            dataSource._dataBlob.s1=[];
                for (let i in ss) {
                    if(shareValue.indexOf(parseInt(ss[i].id))>-1){
                        ss[i].checked='1';
                        dataSource._dataBlob.s1.push(ss[i]);
                    }else{
                        dataSource._dataBlob.s1.push(ss[i]);
                    }
                }


            const dataTemp =JSON.parse(JSON.stringify(dataSource._dataBlob.s1))
            this.setState({  dataSource: this.state.dataSource.cloneWithRows(dataTemp)})
        })
    }

    render() {

        const row = (rowData, sectionID, rowID) => {

            return (
                <div key={rowID} className='customHrmItemInfo'>
                    <CheckboxItem key={rowData.id}  defaultChecked={rowData.checked=='1'?true:false} onChange={() => this.checkBoxOnChange(rowData)}>
                        <Avatar userId={rowData.id} />
                        <div className='itemDataOne'><span  className='itemName'>{rowData.name}</span><span className='itemDept'>{rowData.subTitle}</span></div>
                        <div className='itemDataTwo'><span  className='itemName'>{rowData.jobTitle}</span><span className='itemDept'>{rowData.deptTitle}</span></div>
                    </CheckboxItem>
                </div>
            );
        };

        let yixuanTitle = <span >{getLabel(525743,'已选(0)') }</span>;
        if(this.state.shareValue.length>0){
            yixuanTitle = <span style={{"color":"red"}}>{getLabel(83303,'已选') }({this.state.shareValue.length})</span>;
        }

        let {dataSource,isLoading,searchList} = this.state;


        return (
            <div style={{"padding":"0px 0px 0px 11px"}}>
                <div className="customHrmSearch">
                    <SearchBar
                        className="search-select"
                        placeholder="Search"
                        onSubmit={this.onSearchChange}
                        extraButton={[
                            { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> }
                        ]}
                    />

                </div>
                <div className='customHrmItemBody'>
            <ListView
                ref={el => this.lv = el}
                dataSource={dataSource}
                renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                    {isLoading ? 'Loading...' : ''}
                </div>)}
                onEndReached={this.onEndReached}
                renderRow={row}
                className="am-list"
                pageSize={10}
                style={{"height":"calc(100vh - 100px)"}}
                scrollRenderAheadDistance={500}
            />
                </div>
                <div className="customHrmItemBtn am-flexbox wm-route-layout-buttons  am-flexbox-align-center">
                    <div className="am-flexbox-item" style={{"flex":"3 1 0%"}}><a role="button"
                                                                              className="am-button wm-browser-hrm-modal-btns-selected wm-browser-hrm-modal-btns-white"
                                                                              text={getLabel(525743,'已选(0)') }
                                                                              aria-disabled="false"><span>{yixuanTitle}</span></a>
                    </div>
                    <div className="am-flexbox-item" style={{"flex":"1 1 0%"}}><a role="button"
                                                                              className="am-button wm-browser-hrm-modal-btns-grey"
                                                                              text={getLabel(311,'清除') }
                                                                                  onClick={this.onCancel}
                                                                              aria-disabled="false"><span>{getLabel(311,'清除') }</span></a>
                    </div>
                    <div className="am-flexbox-item" style={{"flex":"1 1 0%"}}><a role="button"
                                                                              className="am-button am-button-primary"
                                                                              text={getLabel(826, "确定")}
                                                                                  onClick={this.onOk}
                                                                              aria-disabled="false"><span>{getLabel(826, "确定")}</span></a>
                    </div>
                </div>
            </div>
        );
    }
}
